<template>
	<el-card shadow="never" class="chart" :body-style="{ padding: '54px 24px 46px' }">
		<div class="chart__tab <sm:top-[10px]">
			<el-tabs v-model="activeName">
				<el-tab-pane v-if="flag === 0" label="新增用户" name="1"></el-tab-pane>
				<el-tab-pane label="订单收入" name="2"></el-tab-pane>
				<el-tab-pane label="订单总数" name="3"></el-tab-pane>
			</el-tabs>
		</div>
		<div ref="chart" v-loading="loading" class="h-[500px]"></div>
	</el-card>
</template>

<script>
import dayjs from 'dayjs';
import * as echarts from 'echarts';
export default {
	name: 'Chart',
	data() {
		return {
			activeName: '1',
			chart: null,
			loading: false,
			flag: 0,
			name: {
				1: '新增用户',
				2: '订单收入',
				3: '订单总数',
			},
		};
	},
	watch: {
		activeName() {
			this.getOrderNumDaily();
		},
	},
	created() {
		this.flag = this.$store.getters.roles.findIndex((item) => item === 'admin' || item === 'dev');
		if (this.flag <= -1) {
			this.activeName = '2';
			this.userId = this.$store.getters.userId;
		}
		this.getOrderNumDaily();
	},
	methods: {
		getOrderNumDaily() {
			this.loading = true;
			this.$request
				.post('/mall/order/getOrderNumDaily', {
					beginTime: dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
					endTime: dayjs().format('YYYY-MM-DD'),
					type: this.activeName,
					userId: this.userId,
				})
				.then((response) => {
					this.$nextTick(() => {
						if (this.chart) {
							this.chart.clear();
							this.chart.dispose();
						}
						const chartDom = this.$refs.chart;
						this.chart = echarts.init(chartDom);
						const option = {
							title: {
								text: '统计折线图',
								subtext: '数量/日期',
							},
							tooltip: {
								trigger: 'axis',
								axisPointer: {
									type: 'cross',
									label: {
										backgroundColor: '#6a7985',
									},
								},
							},
							grid: {
								left: '3%',
								right: '4%',
								bottom: '3%',
								containLabel: true,
							},
							xAxis: [
								{
									type: 'category',
									boundaryGap: true,
									axisTick: false,
									data: response.data.map((d) => d.date),
								},
							],
							yAxis: [
								{
									type: 'value',
								},
							],
							series: [
								{
									name: this.name[this.activeName],
									type: 'line',
									smooth: false,
									areaStyle: {
										normal: {
											color: new echarts.graphic.LinearGradient(
												0,
												0,
												0,
												1,
												[
													{
														offset: 0,
														color: 'rgba(76, 89, 198, 0.9)',
													},
													{
														offset: 0.6,
														color: 'rgba(76, 89, 198, 0.2)',
													},
													{
														offset: 0.8,
														color: 'rgba(76, 89, 198, 0.1)',
													},
												],
												false
											),
											shadowColor: 'rgba(76, 89, 198, 0.1)',
											shadowBlur: 6,
										},
									},
									lineStyle: {
										width: 0,
									},
									data: response.data.map((d) => d.num),
								},
							],
						};
						this.chart.setOption(option);
						window.onresize = () => {
							this.chart.resize();
							this.windowWidth = document.documentElement.clientWidth;
						};
					});
				})
				.finally(() => {
					this.loading = false;
				});
		},
	},
};
</script>

<style scoped lang="scss">
.chart {
	box-shadow: 0 3px 3px 1px rgba(0, 0, 0, 0.05);
	@apply relative border-none rounded-[12px];
	&__tab {
		left: 50%;
		transform: translateX(-50%);
		z-index: 999;
		@apply absolute;
		::v-deep {
			.el-tabs__active-bar {
				height: 3px;
			}
			.el-tabs__nav-wrap::after {
				display: none;
			}
			.el-tabs__item {
				font-weight: bold;
				font-size: 14px;
				color: #333333 !important;
			}
		}
	}
}
</style>
